<template>
  <div class="lxfix">
    <h2>商品分类</h2>
    <van-tree-select
      :items="items"
      :main-active-index.sync="active"
      @click-nav="onNavSelect"
    >
      <template #content>
        <!-- <div class="m-box" v-for="item in goodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="logo" />
          <div class="m-right">
            <h3>{{item.name}}</h3>
            <p>{{item.retail_price}}</p>
          </div>
        </div> -->
        <!-- //商品卡片 -->
        <van-grid :column-num="2" :gutter="10" >
          <van-grid-item
            @click="onProductDetail(item.id)"
            v-for="item in selectlist"
            :key="item.id"
            :icon="item.list_pic_url"
            :text="item.name"
          />
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import { requestProductList, requestCategoryList } from "@/api/category";
export default {
  data() {
    return {
      active: 0,
      items: [], //侧边栏数据
      selectlist: [], //右边的数据
      categoryList: [], //接口过来的数据
    };
  },
  methods: {
    //绑定点击事件 让右边和右边相关联
    onNavSelect(data) {
      //  console.log(data);
      //遍历商品列表，让左边的分类的id与右边商品的id相等，然后把商品列表赋给要显示的商品数组
      let obj = this.categoryList.find(
        (item) => item.id == this.items[data].id
      );
      this.selectlist = obj.goodsList;
    },
    onProductDetail(id){
        this.$router.push({path:'/cart/cdetil',query:id})
    }
  },
  async created() {
    let res = await requestProductList();
    //  侧边栏数据
    this.categoryList = res.data.data.categoryList;
    // 遍历侧边栏数组返回id和text对象
    this.items = this.categoryList.map((item) => {
      return { id: item.id, text: item.name };
    });
    this.onNavSelect(0);
  },
};
</script>
<style lang="scss" scoped>
.van-tree-select {
  height: 90% !important;
 
}
h2{
  color: rgb(153, 118, 123);
  text-align: center;
  margin: 10px auto;
}
.van-grid{
  background-color: rgb(243, 241, 216);
}
// .van-tree-select__nav{
//   background-color: rgb(243, 241, 216);
// }
.van-sidebar-item{
  background-color: rgb(248, 247, 240);
  
}
.van-sidebar-item--select, .van-sidebar-item--select:active{
   background-color: rgb(243, 241, 216)

}




</style>